<template>
    <li class="list-group-item">
        <div class="handle">
            <a href="javascript:;" @click="deleteText(index)">删除</a>
        </div>
        <p class="user"><span >{{item.name}}</span><span>说:</span></p>
        <p class="centence">{{item.text}}</p>
    </li>
</template>

<script>
    export default {
        name: "Item",
        props:{
            item:Object,
            index:Number
        },
        methods:{
            deleteText (index) {
                let {item}=this;
                if(window.confirm(`是否要删除${item.name}的评论？`)){
                    this.$emit('deleteText',index)
                }
            }
        }
    }
</script>

<style>
    .reply {
        margin-top: 0px;
    }

    li {
        transition: .5s;
        overflow: hidden;
    }

    .handle {
        width: 40px;
        border: 1px solid #ccc;
        background: #fff;
        position: absolute;
        right: 10px;
        top: 1px;
        text-align: center;
    }

    .handle a {
        display: block;
        text-decoration: none;
    }

    .list-group-item .centence {
        padding: 0px 50px;
    }

    .user {
        font-size: 22px;
    }
</style>